<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="cascaderProps"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedOptions: [],
      options: [],
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      }
    };
  },
  created() {
    // 方式一：一次性获取所有数据，前端处理成三级联动结构
    // this.fetchAllRegions();
    // 方式二：按需加载，先加载省份（pid=0 ，中国作为顶级 ）
    this.fetchRegionsByPid(0); 
  },
  methods: {
    // 一次性获取所有数据并处理成树形结构
    async fetchAllRegions() {
      const res = await axios.get('/region/all');
      const regions = res.data;
      // 处理成三级联动需要的树形结构，类似前面提到的 convertToTree 函数逻辑
      const treeData = this.convertToTree(regions, 0);
      this.options = treeData;
    },
    // 按需加载（比如先加载省份，选完省份加载城市，再选城市加载区县 ）
    async fetchRegionsByPid(pid) {
      const res = await axios.get(`/region/${pid}`);
      // 根据返回的数据，结合当前级联选择的状态更新 options
      // 具体处理要结合级联选择器的动态加载逻辑，较复杂，这里简单示例
      if (pid === 0) {
        this.options = res.data.map(item => ({
          ...item,
          children: []
        }));
      } else {
        // 找到对应的父节点，添加子节点
        const findParent = (arr, pid) => {
          for (const item of arr) {
            if (item.id === pid) {
              return item;
            }
            if (item.children && item.children.length > 0) {
              const result = findParent(item.children, pid);
              if (result) {
                return result;
              }
            }
          }
          return null;
        };
        const parent = findParent(this.options, pid);
        if (parent) {
          parent.children = res.data;
        }
      }
    },
    convertToTree(data, pid) {
      const result = [];
      data.forEach(item => {
        if (item.pid === pid) {
          const children = this.convertToTree(data, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          result.push(item);
        }
      });
      return result;
    },
    handleChange(value) {
      console.log('选中的值：', value);
    }
  }
};
</script>